import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

/**
 * 精灵创建树林效果
 */
// 加载树的贴图
const txrTree = new THREE.TextureLoader().load('../../textures/sprite_tree.png');
// 批量创建树的精灵模型
for(let i = 0; i < 100; i += 1) {
  const sprite_tree_mat = new THREE.SpriteMaterial({
    map: txrTree
  });
  // 创建精灵
  const sprite_tree = new THREE.Sprite(sprite_tree_mat);
  scene.add(sprite_tree);
  // 设置精灵大小
  sprite_tree.scale.set(100, 100, 1); // 这里不是缩放，而是直接设置大小
  const k1 = Math.random() - .5;
  const k2 = Math.random() - .5;
  // 设置精灵位置，在xoy平面随机定位
  sprite_tree.position.set(1000 * k1, 1000 * k2, 50);
}

/**
 * 构建草地
 */
const grassPlane = new THREE.PlaneGeometry(1600, 1600);
// 加载草地纹理贴图
const txrGrass = new THREE.TextureLoader().load('../../textures/grass.png');
// 设置重复
txrGrass.wrapS = THREE.RepeatWrapping;
txrGrass.wrapT = THREE.RepeatWrapping;
txrGrass.repeat.set(100, 100);
const grassMat = new THREE.MeshLambertMaterial({
  map: txrGrass
});
const plane = new THREE.Mesh(grassPlane, grassMat);
scene.add(plane);

const al = new THREE.AmbientLight(0xffffff);
scene.add(al);
const k = innerWidth / innerHeight,
      s = 75,
      camera = new THREE.PerspectiveCamera(s, k, 1, 10000);
camera.position.set(0, -800, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);
(function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
})();